<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>分享有礼招商</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../../css/mui.min.css" rel="stylesheet" />
		<style>
			* {
				box-sizing: border-box;
			}
			
			html,
			body {
				margin: 0;
				padding: 0;
				border: 0;
			}
			
			#backdrop {
				width: 750px;
				margin: 0 auto;
				background-image: url(切图标注/分享有礼招商/背景@2x.png);
				background-repeat: no-repeat;
				background-size: 100% 100%;
			}
			
			#container {
				padding-top: 35%;
			}
			
			#left {
				margin-top: 29%;
				margin-left: 15%;
			}
			
			#left img:nth-of-type(1) {
				width: 151px;
			}
			
			#left img:nth-of-type(2) {
				width: 292px;
				margin-left: 10%;
			}
			
			#right {
				padding-bottom: 5vh;
			}
			
			#right input {
				display: block;
				width: 70%;
				margin: 2vh auto;
				height: 5vh;
				background: url(切图标注/分享有礼招商/输入框.png) no-repeat center;
				cursor: pointer;
				border-radius: 10px;
				outline: none;
				text-indent: 1rem;
			}
			
			#right img {
				width: 527px;
				display: block;
				margin: 0 auto;
			}
			
			#right input:nth-child(3) {
				width: 10%;
				height: 4vh;
				background-image: url(切图标注/分享有礼招商/发送按钮@2x.png) no-repeat center;
				margin-top: -6.5%;
				margin-left: 73%;
				text-indent: 0;
			}
			
			@media screen and (max-width: 480px) {
				#backdrop {
					width: 100%;
				}
				#container {
					padding-top: 93%;
				}
				#left {
					margin-top: 20%;
					margin-left: 11%;
				}
				#left img:nth-of-type(1) {
					width: 34%;
					height: 11vh;
				}
				#left img:nth-of-type(2) {
					width: 50%;
					height: 8vh;
					margin-left: -1%;
				}
				#right input:nth-child(3) {
					width: 20%;
					margin-top: -11.5%;
					margin-left: 61%;
				}
				#right img {
					width: 70%;
					display: block;
					margin: 0 auto;
				}
			}
		</style>
	</head>

	<body>
		<div id="backdrop">
			<div id="container">
				<div id="left">
					<img src="切图标注/分享有礼招商/红包@2x.png" />
					<img src="切图标注/分享有礼招商/输入您的手机号及短信验证码立即成为我们的小伙伴吧！拷贝@2x.png" />
				</div>
				<div id="right">
					<input type="text" placeholder="请输入手机号" />
					<input type="text" placeholder="请输入验证码" />
					<input type="button" value="发送" onclick="setTime(this)"></input>
					<img src="切图标注/分享有礼招商/确定拷贝@2x.png" />
				</div>
			</div>
		</div>
	</body>
	<script src="js/jquery-3.2.1.js"></script>
	<script src="js/layer/layer.js"></script>
	<script>
		var countdown = 60;

		function setTime(obj) {
			if(countdown == 0) {
				obj.removeAttribute('disabled')
				obj.value = "发送";
				countdown = 60;
				return
			} else {
				obj.setAttribute('disabled', true)
				obj.value = "获取验证码(" + countdown + ")";
				countdown--;
			}
			setTimeout(function() {
				setTime(obj)
			}, 1000)

		}
	</script>
	<script>
		$('#right img').click(function() {
			layer.open({
				type: 1,
				title: false //不显示标题栏
					,
				closeBtn: false,
				area: '300px;',
				shade: 0.8,
				id: 'LAY_layuipro' //设定一个id，防止重复弹出
					,
				resize: false,
				btn: ['火速围观', '残忍拒绝'],
				btnAlign: 'c',
				moveType: 1 //拖拽模式，0或者1
					,
				content: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">你好啊<br>尊敬的用户</div>',
				success: function(layero) {
					var btn = layero.find('.layui-layer-btn');
					btn.find('.layui-layer-btn0').attr({
						href: 'http://www.layui.com/',
						target: '_blank'
					});
				}
			});
		})
	</script>

</html>